<template>
  <div style="text-align: left; background-color: #f6f7f9; height:670px;">
    <!-- 顶部导航 -->
    <van-sticky>
      <van-nav-bar left-text="订单详情" style="background: #f6f7f9; padding:10px 10px 10px 0;"
                   @click-left="$router.replace('/home/order-list')">
        <template #left>
          <a style="font-size: 21px; font-weight: bold">
            <van-icon name="arrow-left" size="20" color="#000"/>
            {{ orderInfo.status }}
          </a>
        </template>
      </van-nav-bar>
    </van-sticky>
    <div>
      <van-cell v-if="orderInfo.status=='待评价' || orderInfo.status=='订单完成'"
                :label="orderInfo.address">
        <template #icon>
          <van-icon name="free-postage" size="40" style="padding-right: 10px;"/>
        </template>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="name" style="font-weight: bold;">{{ orderInfo.name }}</span>
          <span class="tel" style="margin-left: 20px;">{{ orderInfo.tel }}</span>
        </template>
      </van-cell>

      <van-cell v-else :label="orderInfo.address" @click="updateAddress" is-link>
        <template #icon>
          <van-icon name="free-postage" size="40" style="padding-right: 10px;"/>
        </template>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="name" style="font-weight: bold;">{{ orderInfo.name }}</span>
          <span class="tel" style="margin-left: 20px;">{{ orderInfo.tel }}</span>
        </template>
      </van-cell>
    </div>
    <van-cell title="快递公司" :value="orderInfo.company"/>
    <van-cell title="取件信息" :value="orderInfo.message"/>
    <div>
      <van-cell v-if="orderInfo.status=='待评价' || orderInfo.status=='订单完成'"
                title="订单备注" :value="orderInfo.remark"/>
      <van-cell v-else title="订单备注" @click="show_remark=true" is-link :value="orderInfo.remark"/>
    </div>
    <van-popup position="top" closeable v-model="show_remark">
      <h3 style="text-align: center; padding: 15px;">修改订单备注</h3>
      <van-form @submit="updateOrder()">
        <van-field
            v-model="orderInfo.remark"
            name="订单备注"
            placeholder="输入订单备注,如有大件物品请备注"
            style="background: #e5e5e7; border-radius: 15px;"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </van-popup>
    <van-cell title="订单编号" :value="orderInfo.sn"/>
    <van-cell v-if="orderInfo.staffName!=null" title="配送员姓名" :value="orderInfo.staffName"/>
    <van-cell v-if="orderInfo.staffPhone!=null" title="配送员手机号" :value="orderInfo.staffPhone"/>
    <van-cell v-if="orderInfo.type!=null" title="支付方式" :value="orderInfo.type"/>
    <van-cell v-if="orderInfo.onlinePaymentNum!=null" title="线上第三方流水号" :value="orderInfo.onlinePaymentNum"/>
    <van-cell title="创建时间" :value="orderInfo.createTime"/>
    <van-cell v-if="orderInfo.payTime!=null" title="支付时间" :value="orderInfo.payTime"/>

    <div style="background: white; padding: 15px; text-align: right;">
      <div  v-if="orderInfo.status=='待支付'">
        <van-button @click="withdraw" round type="info">取消订单</van-button>
        <van-button @click="showTypePopup" round type="info" style="margin-left: 15px;">立即支付</van-button>
      </div>
      <van-button v-if="orderInfo.status=='等待接单'" @click="withdraw" round type="info">取消订单</van-button>
      <van-button v-if="orderInfo.status=='待评价'" @click="evaluate" round type="primary">评价订单</van-button>
      <van-button v-if="orderInfo.status=='订单完成'" @click="deleteOrder" round type="danger">删除订单</van-button>
    </div>

    <van-popup position="bottom" closeable v-model="show_type" style="text-align: center;">
      <van-form @submit="orderPay()">
        <h3 style="text-align: center; padding: 15px;">选择支付方式</h3>
        <van-field name="radio">
          <template #input>
            <van-radio-group v-model="paymentInfo.type" direction="horizontal">
              <van-radio name="1">支付宝</van-radio>
              <van-radio name="2">微信</van-radio>
              <van-radio name="3">线下</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">支付</van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "OrderDetails",
  data() {
    return {
      show_message: false,
      show_remark: false,
      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
      show_picker: false,
      show_type:false,
      orderInfo: {
        id: '',
        name: '周杰伦',
        tel: '15770641554',
        address: '江西省宜春市袁州区宜春学院',
        company: '京东速递',
        message: '1-1356',
        remark: '下午送到就行',
        status: '',
        staffName: '',
        staffPhone: '',
        isEvaluate:'',
        sn: '2301272039309189248',
        type: '',
        onlinePaymentNum: '',
        createTime: '2023-01-11T11:29:49',
        payTime: '',
      },
      paymentInfo:{
        type:'',
        orderSn:''
      }
    };
  },
  methods: {
    loadOrderDetails() {
      console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let id = localStorage.getItem('id');
      let url = 'http://localhost:9080/orders/' + id + '/detail';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        console.log(response.data.data);
        let responseBody = response.data.data;
        if (responseBody.status == 1) {
          if (responseBody.payTime == null) {
            responseBody.status = '待支付'
          } else {
            responseBody.status = '等待接单'
          }
        } else if (responseBody.status == 2) {
          responseBody.status = '派送中'
        } else if (responseBody.status == 3) {
          if(responseBody.isEvaluate==1){
            responseBody.status = '待评价'
          }else {
            responseBody.status = '订单完成'
          }
        } else if (responseBody.status == 4) {
          responseBody.status = '订单异常'
        }
        if (responseBody.type == 1) {
          responseBody.type = '支付宝'
        } else if (responseBody.type == 2) {
          responseBody.type = '微信'
        } else if (responseBody.type == 3) {
          responseBody.type = '线下'
        }
        this.orderInfo = responseBody;
        console.log("当前表单数据->>>>>>", this.orderInfo);
      })
    },
    onConfirm(value) {
      this.orderInfo.company = value;
      this.updateOrder();
      this.show_picker = false;
    },
    updateOrder() {
      let url = 'http://localhost:9080/orders/' + this.orderInfo.id + '/update';
      let orderInfo = this.qs.stringify(this.orderInfo, {arrayFormat: 'repeat'});
      console.log('orderInfo = ' + orderInfo);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url, orderInfo).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        if (responseBody.state == 20000) {
          this.$toast.success('修改成功!');
          this.loadOrderInfo();
        } else {
          this.$toast.fail(responseBody.message);
        }
      });
    },
    updateAddress() {
      let orderId = this.orderInfo.id;
      localStorage.setItem('orderId', orderId);
      this.$router.push("/order/update-address");
    },
    showTypePopup(){
      this.show_type=true;
    },
    orderPay(){
      let url = 'http://localhost:9080/payments/create';
      this.paymentInfo.orderSn=this.orderInfo.sn;
      let paymentInfo = this.qs.stringify(this.paymentInfo, {arrayFormat: 'repeat'});
      console.log('orderInfo = ' + paymentInfo);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url, paymentInfo).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        if (responseBody.state == 20000) {
          this.$toast.success('支付成功!');
          this.$router.replace("/home/order-list");
        }else{
          this.$toast.fail(responseBody.message);
        }
      });
    },
    withdraw(){
      this.$dialog.confirm({
        title: '取消订单',
        message: '取消订单后将无法恢复，如需恢复请联系管理员，是否继续？',
      })
          .then(() => {
            let url = 'http://localhost:9080/orders/' + this.orderInfo.id + '/delete-withdraw';
            this.axios
                .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
                .post(url).then((response) => {
              let responseBody = response.data;
              console.log(responseBody);
              if (responseBody.state == 20000) {
                this.$toast.success('订单已成功取消!');
                this.$router.replace("/home/order-list");
              } else {
                this.$toast.fail(responseBody.message);
              }
            });
          })
          .catch(() => {

          });
    },
    deleteOrder(){
      this.$dialog.confirm({
        title: '删除订单',
        message: '删除该订单后将无法恢复，如需恢复请联系管理员，是否继续？',
      })
          .then(() => {
            let url = 'http://localhost:9080/orders/' + this.orderInfo.id + '/delete-user';
            this.axios
                .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
                .post(url).then((response) => {
              let responseBody = response.data;
              console.log(responseBody);
              if (responseBody.state == 20000) {
                this.$toast.success('删除订单成功!');
                this.$router.replace("/home/order-list");
              } else {
                this.$toast.fail(responseBody.message);
              }
            });
          })
          .catch(() => {

          });
    },
    evaluate(){
      let orderId=this.orderInfo.id;
      localStorage.setItem('orderId',orderId);
      this.$router.push("/order/evaluate");
    }
  },
  mounted() {
    this.loadOrderDetails();
  }
}
</script>

<style scoped>

</style>
